<script lang="ts" setup>
import Plate from "./Plate.vue";
import ProTable from "@/components/ProTable/ProTable.vue";
import { reactive } from "vue";

const list = reactive([
  {
    num: 1332,
    label: "队伍数量",
    image: "",
  },
]);
const mockList = Array(6)
  .fill(null)
  .map((e) => ({
    num: 1332,
    label: "队伍数量",
    image: "",
  }));

const imageUrl = (index: number) =>
  new URL(
    `/src/assets/images/precaution-icon-${index + 1}.png`,
    import.meta.url
  ).href;
</script>

<template>
  <Plate title="风险防范">
    <div class="flex gap-x-30px p-l-20px m-l-10px">
      <aside class="flex-center">
        <div class="total w127px h143px flex-col-center rounded-50%">
          <span class="text-blue text-20px font-bold">456122</span>
          <span class="text-white leading-24px">总数</span>
        </div>
      </aside>
      <article
        class="grid grid-cols-3 grid-rows-2 flex-1 h-260px p-t-20px gap-30px gap-y-60px"
      >
        <div
          v-for="({ num, label }, index) in mockList"
          :key="'l2_' + index"
          class="flex-col-between"
        >
          <span class="text-center text-blue-4 font-bold">{{ num }}</span>
          <img :src="imageUrl(index)" alt="" />
          <span class="text-center m-t--10px font-bold">{{ label }}</span>
        </div>
      </article>
    </div>
  </Plate>
</template>

<style lang="less" scoped>
.total {
  background-image: url("@/assets/images/precaution-bg.png");
  background-size: 100% 100%;
}
</style>
